<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>scrollpicker-datetime</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style>
    .inputrow{
        position: relative;
        display: -webkit-box;
        -webkit-box-align: center;
        margin: 0 12px;
        overflow: hidden;
    }
    .inputrow .inputbox{
        -webkit-box-flex: 1;
    }
    .inputrow .inputbox>.icon{
        font-size: 20px;
        height: 20px;
        width: 20px;
        color: #20aeff;
    }
    .SID-DivDateTime .input-text, .SID-DivDateTime .icon {
        pointer-events: none;
    }
    </style>
</head>

<body ontouchstart="">
    <header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1 class="titlebar-title">起止时间</h1>
        </div>
    </header>
    <article>
        <div class="group" id="ID-MeetAdd-GroupAdd">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">起止时间</p>
            </div>
            <div class="inputrow underline">
                <div class="inputbox SID-DivDateTime">
                    <i class="icon icon-time"></i>
                    <input type="text" class="input-text SID-DateTimeStart" readonly placeholder="开始时间">
                </div>
                <div class="inputbox leftline SID-DivDateTime">
                    <i class="icon icon-time" style="margin-left: 8px"></i>
                    <input type="text" class="input-text SID-DateTimeEnd" readonly placeholder="结束时间">
                </div>
            </div>
        </div>
    </article>
    <!--SeedsUI-->
    <script src="../../dist/seedsui.min.js"></script>
    <script type="text/javascript">
        var app={};
        //弹出框
        app.toast=new Toast();
        //时间选择
        app.spDateTime=null;
        var view={
            /*=========================
              Model
              ===========================*/
            render:function(){
                var self = this;
                //时间间隔
                this.minutesSpace=60;
                //最大最小时间
                this.minSpTime=new Date();
                this.minSpTime.setHours(7,0,0,0);
                this.maxSpTime=new Date();
                this.maxSpTime.setHours(22,0,0,0);
                //时间控件分钟数据
                this.minutesData=function(){
                    var data=[];
                    for(var i=0;i<60;i=i+10){
                        var temp=i<10?"0"+i:i;
                        data.push({key:temp,value:temp+"分"});
                    }
                    return data;
                }();
                //时间控件小时数据
                this.hoursData=function(){
                    var startData=[];
                    for(var i=7;i<=21;i++){
                        var temp=i<10?"0"+i:i;
                        startData.push({key:temp,value:temp+"时"});
                    }
                    var endData=startData.slice(0);
                    endData.push({key:"22",value:"22时"});
                    return {
                        startHours:startData,
                        endHours:endData
                    };
                }();
                //加载数据
                this.loadData();
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            loadData:function(){

                this._attach();//使用backbone时，此行无用
            },
            /*=========================
              Method
              ===========================*/
            //时间控件-动态更新分钟
            _newSpMinutes:function(hourKey,minuteKey){
                var self=this;
                var minuteKey=minuteKey;
                var minutes=this.minutesData.slice(0);
                if(hourKey==="22"){
                    minutes=[{key:"00",value:"00分"}];
                    minuteKey="00";
                }else if(hourKey==="07"){
                    minutes.shift();
                }
                app.spDateTime.scrollpicker.replaceSlot(4,minutes,minuteKey,'text-center');//修改第五项
            },
            //时间控件
            _newSpDateTime:function(defaults,input){
                var self=this;
                app.spDateTime=new SpDate({
                    //parent:self.$el[0],
                    viewType:"datetime",
                    //hoursData:self.hoursData.startHours,
                    minutesData:self.minutesData,
                    isSimpleYear:true,
                    minYear:new Date().getFullYear()-5,
                    maxYear:new Date().getFullYear()+5,
                    yearClass:"text-center",
                    monthClass:"text-center",
                    dayClass:"text-center",
                    hourClass:"text-center",
                    minuteClass:"text-center",
                    onInit:function(e){
                        //点击开始时间
                        if(input.classList.contains("SID-DateTimeStart")){
                            e.hours=self.hoursData.startHours;
                        }else if(input.classList.contains("SID-DateTimeEnd")){//点击结束时间
                            e.hours=self.hoursData.endHours;
                        }
                    },
                    onScrollEnd:function(e){
                        //点击结束时间
                        if(!input.classList.contains("SID-DateTimeEnd"))return;
                        //小时算分钟
                        if(e.scrollpicker.activeSlot.index==3){
                            hourKey=e.scrollpicker.activeOptions[3]["key"];
                            minuteKey=e.scrollpicker.activeOptions[4]["key"];
                            self._newSpMinutes(hourKey,minuteKey);//更新总天数
                        }
                    },
                    onClickDone:function(e){
                        var activeDate=new Date(e.activeText.replace(/-/g,"/"));
                        
                        //点击开始时间
                        if(input.classList.contains("SID-DateTimeStart")){
                            //不合法的时间
                            if(activeDate<=new Date()){
                                app.toast.setHTML("时间不能早于当前时间");
                                app.toast.show();
                                return;
                            }

                            var endInput=input.parentNode.nextElementSibling.querySelector(".SID-DateTimeEnd");
                            var endInputDate=new Date(endInput.value.replace(/-/g,"/"));

                            //如果结束时间为空，或者开始时间大于结束时间，则设置结束时间
                            if((endInput.value=="") || (activeDate >= endInputDate)){
                                var endTime=new Date(activeDate).plusMinute(self.minutesSpace);
                                //如果结束时间大于最大时间，则结束时间设置为最大时间
                                if(endTime.compareTime(self.maxSpTime)===1){
                                    endTime.setHours(self.maxSpTime.getHours(),self.maxSpTime.getMinutes(),0,0);
                                }
                                endInput.value=endTime.format("yyyy-MM-dd hh:mm");
                            }
                        //点击结束时间
                        }else if(input.classList.contains("SID-DateTimeEnd")){
                            //不合法的时间
                            if(new Date(activeDate)<=new Date().setMinuteCeil(10)){
                                app.toast.setHTML("结束时间过早");
                                app.toast.show();
                                return;
                            }

                            var prevInput=input.parentNode.previousElementSibling.querySelector(".SID-DateTimeStart");
                            //如果开始时间为空，或者结束时间小于开始时间，设置开始时间
                            var prevInputDate=new Date(prevInput.value.replace(/-/g,"/"));
                            if((prevInput.value=="") || (activeDate <= prevInputDate)){
                                var startTime=activeDate.minusMinute(self.minutesSpace);
                                //如果结束时间大于最大时间，则结束时间设置为最大时间
                                if(startTime.compareTime(self.minSpTime)===-1){
                                    startTime.setHours(self.minSpTime.getHours(),self.minSpTime.getMinutes(),0,0);
                                }
                                prevInput.value=startTime.format("yyyy-MM-dd hh:mm");
                            }
                        }
                        input.value=e.activeText;
                        e.scrollpicker.hide();
                    },
                    onShowed:function(e){
                        if(input.classList.contains("SID-DateTimeEnd")){//点击结束时间
                            var hourKey=e.scrollpicker.activeOptions[3]["key"];
                            var minuteKey=e.scrollpicker.activeOptions[4]["key"];
                            self._newSpMinutes(hourKey,minuteKey);
                        }
                    },
                    onHid:function(e){
                        e.scrollpicker.destroy();
                    }
                });
                if(defaults && defaults.length>0){
                    app.spDateTime.setDefaultYear(defaults[0]);
                    app.spDateTime.setDefaultMonth(defaults[1]);
                    app.spDateTime.setDefaultDay(defaults[2]);
                    app.spDateTime.setDefaultHour(defaults[3]);
                    app.spDateTime.setDefaultMinute(defaults[4]);
                    app.spDateTime.update();
                }
            },
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                //点击选择
                var dateTimeBoxes=document.querySelectorAll(".SID-DivDateTime");
                for(var i=0,div;div=dateTimeBoxes[i++];){
                    div.addEventListener("click",function(e){
                        self._onClickDivDateTime(e);
                    },false)
                }
            },
            /*=========================
              Event Handler
              ===========================*/
            //点击日期选择
            _onClickDivDateTime:function(e){
                var self=this;
                var defaults=[];
                var input=e.target.querySelector(".input-text");
                if(input.value!=""){
                    var split=input.value.split(" ");
                    var split1=split[0].split("-");
                    var split2=split[1].split(":");
                    defaults[0]=split1[0];
                    defaults[1]=split1[1];
                    defaults[2]=split1[2];
                    defaults[3]=split2[0];
                    defaults[4]=split2[1];
                }else{
                    var date=new Date().setMinuteCeil(10);
                    defaults[0]=date.getFullYear();
                    defaults[1]=date.getMonth()+1;
                    defaults[2]=date.getDate();
                    defaults[3]=date.getHours();
                    defaults[4]=date.getMinutes();
                }
                this._newSpDateTime(defaults,input);
                setTimeout(function(){
                    app.spDateTime.show();
                },10);
            },
        }

        window.addEventListener("load",function(){
            view.render();
        }, false);

        //定义exmobi返回
        function back(){history.go(-1);}
    </script>
</body>
</html>
